<ion-header class="header">
    <ion-toolbar content-page>
        <ion-buttons start>
            <button ion-button icon-only (click)="backClickHandle($event)">
                <i class="cancelBtn">取消</i>
            </button>
        </ion-buttons>
        <ion-title>
            <span *ngIf="pageType===1">添加日程</span>
            <span *ngIf="pageType===2">日程详情</span>
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="saveHandler()" *ngIf="pageType===1">
                <i class="settings" >保存</i>
            </button>
            <button ion-button icon-only (click)="editHandler()" *ngIf="pageType===2&&editStatus">
                <i class="settings">保存</i>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content [class.forbid]="scrollStatus">
    <ion-list [class.sys]="!editStatus">
        <!--标题-->
        <ion-item class="titleItem device-pixel-border-bottom">
            <ion-input type="text" input-content-length="30" maxlength="30" [disabled]="!editStatus"  class="note"
                       placeholder="请输入标题..." [(ngModel)]="data.name"></ion-input>
        </ion-item>
        <!--开始时间-->
        <ion-item class="setItem device-pixel-border-bottom" #datetime>
            <ion-label>
                <span>开始时间</span>
            </ion-label>
            <ion-icon name="arrow" item-end="pageType!=2"></ion-icon>
            <ion-datetime  cancelText="取消" doneText="确定" min="2010" max="2100" displayFormat="YYYY年MM月DD日 HH:mm"
                          pickerFormat="YYYYMMDD HH:mm" yearValues="{{startYearList}}"  minuteValues="[00,5,10,15,20,25,30,35,40,45,50,55]"
                          [(ngModel)]="timerStr.startTimeStr"
                          (ionChange)="onStartTimeChange()" [disabled]="!editStatus"
                          [pickerOptions]="pickerOptions"></ion-datetime>
        </ion-item>
        <!--结束时间-->
        <ion-item class="setItem device-pixel-border-bottom">
            <ion-label>
                <span>结束时间</span>
            </ion-label>
            <ion-icon name="arrow" item-end></ion-icon>
            <ion-datetime cancelText="取消" doneText="确定" displayFormat="YYYY年MM月DD日 HH:mm" pickerFormat="YYYYMMDD HH:mm"
                          minuteValues="[00,5,10,15,20,25,30,35,40,45,50,55]" [(ngModel)]="timerStr.endTimeStr" yearValues="{{endYearList}}"
                          [pickerOptions]="pickerOptions"
                          min="{{timerStr.startTimeStr}}" max="2100" (ionChange)="onEndTimeChange()"
                          [disabled]="!editStatus"></ion-datetime>
        </ion-item>
        <!--重复-->
        <ion-item class="setItem device-pixel-border-bottom"  (click)="openActionFrequency($event,'frequency')">
            <ion-label>
                是否重复
            </ion-label>
            <ion-icon name="arrow" item-end></ion-icon>
            <ion-label class="value">
                <span class="grayResult">{{repeatItem[data.frequency-1]}}</span>
            </ion-label>
        </ion-item>
        <ion-item class="setItem device-pixel-border-bottom" *ngIf="data.frequency!==1" (click)="openEndRepeat(timerStr.endTimeStr)">
            <ion-label>
                结束重复
            </ion-label>
            <ion-icon name="arrow" item-end></ion-icon>
            <ion-label class="value">
                <span class="grayResult">{{getEndRepeatTime(endRepeat)}}</span>
            </ion-label>
        </ion-item>
        <!--提醒-->
        <ion-item class="setItem device-pixel-border-bottom"  (click)="openActionReminder($event,'reminder')">
            <ion-label>
                提醒
            </ion-label>
            <ion-icon name="arrow" item-end></ion-icon>
            <ion-label class="value">
                <span class="grayResult">{{noticeItem[data.reminder-1]}}</span>
            </ion-label>
        </ion-item>
        <!--备注-->
        <div class="remark-word-panel device-pixel-border-bottom"  *ngIf="editStatus">
            <ion-item class="remarkItem">
                <ion-textarea id="remark-box"  type="text" autoresize="{{texareaHeight}}" class="wordTip adp-textarea" placeholder="添加文字备注" [(ngModel)]="data.remark"
                               [readonly]="!editStatus"
                               (input)="fillRemark($event)" (change)="fillRemark($event)" (focus)="remarkCursor($event)" (blur)="lostTarget($event)"
                >
                </ion-textarea>
               <!-- <div class="scroll-box">
                    <p class="scroll-slide"></p>
                </div>-->
            </ion-item>
            <!--文字备注长度-->
            <div class="inputTip" [class.active]="editingLang>=200" *ngIf="editStatus">{{editingLang}}/200</div>
        </div>
        <div [innerHTML]="data.remark | htmlCss" class="system system-innerContent" *ngIf="!editStatus"></div>
        <!--录音开关-->
        <ion-item  class="voiceItem device-pixel-border-bottom" (click)="voiceChange()" *ngIf="!voiceFile&&editStatus">
            <ion-label class="voiceTip">
                <span *ngIf="!enterStatus">添加语音备注</span>
                <span *ngIf="enterStatus&&!voiceFile" class="ready">请按住底部按钮说话</span>
            </ion-label>
        </ion-item>
        <!--录音结果-->
        <ion-item-sliding #slidingItem *ngIf="voiceFile" class="voice-result">
            <ion-item [class.download]="downloadTimerLength>=2" class="device-pixel-border-bottom">
                <adp-voice-player [voiceUrl]="voiceFile" [voiceLength]="voiceLength" [id]="id" [isNewVoice]="isNewVoice"></adp-voice-player>
            </ion-item>
            <ion-item-options side="right">
                <button ion-button (click)="deleteVoice($event,slidingItem)">
                    <i></i>
                </button>
            </ion-item-options>
        </ion-item-sliding>
        <!--日程删除按钮-->
        <ion-buttons *ngIf="pageType===2&&!voiceBtnStatus&&editStatus" class="detailButton">
            <button ion-button color="danger" style="background-color: #CD3503;" (click)="deleteSchedule()">删&emsp;除</button>
        </ion-buttons>
    </ion-list>
    <!--选择修改方式-->
    <ion-item style="width: 0;height: 0" *ngIf="editStatus">
        <ion-select (ionChange)="selUpdateRule()" #updateRule interface="action-sheet" [(ngModel)]="data.updateRule" cancelText="取消" okText="确定">
            <ion-option *ngFor="let item of updateRuleOption" [value]=item.value>{{item.str}}</ion-option>
        </ion-select>

    </ion-item>
    <!--选择删除方式-->
    <ion-item style="width: 0;height: 0" *ngIf="editStatus">
        <ion-select (ionChange)="selDelRule()" #delRule interface="action-sheet" [(ngModel)]="data.delRule" cancelText="取消" okText="确定">
            <ion-option *ngFor="let item of delRuleOption" [value]=item.value>{{item.str}}</ion-option>
        </ion-select>
    </ion-item>
</ion-content>
<adp-media-audio (audioSuccess)="recordSuccess($event)" [audioStatus]="audioStatus" [audioBtn]="audioBtn" *ngIf="enterStatus&&!voiceFile"></adp-media-audio>
